<script setup lang="ts">
import type { GoodsItemType } from '@/types/goods'

const baseURL = import.meta.env.VITE_BASE_URL

type PropsType = {
  goods: GoodsItemType
}
const props = defineProps<PropsType>()
</script>

<template>
  <div
    @click="$router.push(`/item/${goods.id}`)"
    class="flex w-full transition-all duration-200 rounded-lg bg-white overflow-hidden mt-2 cursor-pointer hover:mt-0 hover:mb-2 hover:shadow-md"
  >
    <div class="w-full flex flex-col justify-center items-center">
      <div class="h-240px w-full">
        <img v-img-lazy="baseURL + goods.cover" src="@/assets/img/load.gif" class="h-full w-full object-cover" alt="" />
      </div>
      <div class="flex flex-col justify-center items-center gap-2 py-2 px-6 flex-1">
        <div class="text-lg">{{ goods.name }}</div>
        <div class="text-red-700 text-4">¥ {{ goods.price }}</div>
        <div class="text-14px text-gray-600">{{ goods.description }}</div>
      </div>
    </div>
  </div>
</template>
